import React, { useMemo, useState } from 'react';
import type { CSSProperties, FC, ReactNode } from 'react';
import type { DragSourceMonitor } from 'react-dnd';
import { useDrag } from 'react-dnd';

const style: CSSProperties = {
  border: '1px dashed gray',
  padding: '0.5rem',
  margin: '0.5rem',
};

export const SourceBox: FC<any> = (props) => {
  const [forbidDrag, setForbidDrag] = useState(false);
  const [{ isDragging }, drag] = useDrag(
    () => ({
      type: props.type || '',
      canDrag: !forbidDrag,
      // 传递参数
      item: {
        kk: '参数',
        ...props,
      },
      collect: (monitor: DragSourceMonitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [forbidDrag],
  );

  const containerStyle = useMemo(
    () => ({
      ...style,
      opacity: isDragging ? 0.4 : 1,
      cursor: forbidDrag ? 'default' : 'move',
    }),
    [isDragging, forbidDrag],
  );

  return (
    <div ref={drag} style={containerStyle} role="SourceBox">
      <small>{props.title}</small>
    </div>
  );
};

export default SourceBox;
